<template>
	<div class="view-liveBefore flex flex-direction-v">
		<div class="liveBefore-header flex">
			<div class="item-left flex-1">
				<mt-button @click="goBack" class="back" icon="back" plain></mt-button>
				<img class="userImg" src="../../../../static/img/user/head-portrait.png" />
				<div class="userInfo">
					<h5 class="userName">{{userInfo.user_name}}</h5>
					<h5 class="roomId">房间号：{{userInfo.room_id}}</h5>
				</div>
			</div>
			<div class="item-right">
				<mt-button class="set" plain>设置</mt-button>
			</div>
		</div>
		<div class="liveBefore-main flex flex-direction-v flex-center-vh">
			<div class="live-title-wrap">
				<div ref="liveTitle" class="live-title">
					<span @click="isLiveTitleEdit = true" v-show="isLiveTitleEdit === false" class="">{{liveTitle}}</span>
					<input @blur="isLiveTitleEdit = false" v-if="isLiveTitleEdit === true" class="live-title-input" v-model="liveTitle" v-focus></input>
				</div>
				<div class="live-title-wrap-bg"></div>
			</div>
			<div v-show="isLiveTitleEdit === false" class="live-cover-wrap">
				<div class="live-cover-title-main">
					<span class="live-cover-title">上传娱乐直播间封面</span>
					<i class="iconfont icon-xiangyou"></i>
				</div>
				<div class="live-cover-main">
					<!--<img class="live-cover" src="../../../../dist/static/img/user/head-portrait.png" />-->
				</div>
				<div class="live-cover-tips">上传封面，直播间排名更靠前</div>
			</div>
			<div class="live-category-wrap" @click="goPage('category')">
				<span class="live-category">{{categoryListConvent[liveInfoMe.category_id]}}</span>
				<i class="iconfont icon-xiangyou"></i>
			</div>
		</div>
		<div class="liveBefore-footer flex-1">
			<mt-button @click="startLive()" class="startLive" type="default" plain>开始直播</mt-button>
		</div>
	</div>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	import util from '@/util/Util';
	import _liveService from '@/service/liveService';
	import _sessionUser from '@/util/SessionUser';

	export default {
		name: 'LiveBefore',
		data() {
			return {
				liveTitle: '',
				liveInfoMe: {},
				isLiveTitleEdit: false,
				categoryListConvent: {}
			}
		},
		mounted() {
			let vm = this;
			_sessionUser.loadPage({
				scope: vm,
				exp: vm.userInfo && vm.categoryList,
				success: async() => {
					await vm.getLiveInfo({
						'user_id': vm.userInfo.id,
						'page_number': 0,
						'page_size': 1,
						'callback': function(data) {
							vm.liveInfoMe = data[0];
						}
					});
					vm.categoryList.forEach(function(value, index) {
						vm.categoryListConvent[value.id] = value.name;
					});
					vm.liveTitle = vm.userInfo.user_name + '的直播间';
					vm.setliveTitleWidth();
					let query_category_id = vm.$route.query.category_id;
					// 显示已选择的直播分类
					if(query_category_id) {
						vm.$toast({
							message: `熊猫直播：已选择"${vm.categoryListConvent[query_category_id]}"`,
							className: 'my-toast',
							position: 'bottom',
							duration: 1500
						});
					}
				}
			});
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				categoryList: state => state.liveCategory.categoryList
			}),
		},
		watch: {
			liveTitle() {
				let vm = this;
				vm.setliveTitleWidth();
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				let vm = this;
				// 如果已选择直播分类，要后退两页
				if(vm.$route.query.category_id) {
					vm.$router.go(-2);
				} else {
					vm.$router.goBack();
				}
			},
			// 跳转页面
			goPage(page) {
				let vm = this;
				util.goPage(vm, page);
			},
			// 开始直播
			async startLive() {
				let vm = this;
				await vm.updateLiveInfo({
					'is_live': 2,
					'user_id': vm.userInfo.id
				});
				vm.$toast({
					message: '熊猫直播：已开启直播',
					duration: 1500
				});
			},
			// 获取在线的直播信息，is_live(1.离线;2.在线)
			getLiveInfo(param) {
				let vm = this
				let resultData
				let data
				if(!param) {
					return;
				}
				let res = _liveService.getLiveInfo({
					'user_id': param.user_id || '',
					'is_live': param.is_live || '',
					'page_number': param.page_number || 0,
					'page_size': param.page_size || 20,
					'success': function(response) {
						resultData = response.data;
						if(resultData.success) {
							data = response.data.data;
							param.callback(data);
						}
						console.log('获取在线的直播信息：' + resultData.message);
					}
				})
				return res
			},
			// 更新用户直播信息，让用户直播信息显示在线
			updateLiveInfo(param) {
				let vm = this
				let resultData
				let data
				if(!param) {
					return;
				}
				let res = _liveService.updateLiveInfo({
					'user_id': param.user_id || '',
					'name': param.name || '',
					'title': param.title || '',
					'room_id': param.room_id || '',
					'cover': param.cover || '',
					'viewing_number': param.viewing_number || '',
					'is_live': param.is_live || '',
					'category_id': param.category_id || '',
					'success': function(response) {
						resultData = response.data;
						if(resultData.success) {}
						console.log('更新用户直播信息：' + resultData.message);
					}
				})
				return res
			},
			// 根据文字内容动态设置liveTitle宽度
			setliveTitleWidth() {
				let vm = this;
				let fontSize = 24;
				let textLen = vm.liveTitle.length;
				let endLen = fontSize * textLen;
				if(endLen < 280) {
					vm.$refs.liveTitle.style.width = endLen + 'px';
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view-liveBefore {
		width: 100%;
		height: 100%;
		background: url(./images/beiying.jpg) center no-repeat;
		background-size: cover;
		.liveBefore-header {
			padding: 10px;
			color: white;
			.item-left {
				.back {
					position: relative;
					top: -10px;
					width: 25px;
					height: 35px;
					padding: 0 0 0 5px;
					text-align: left;
					color: #919091;
					border: none;
				}
				.userImg {
					position: relative;
					top: 2px;
					width: 35px;
					height: 35px;
					margin: 0 2px 0 2px;
					object-fit: cover;
					border-radius: 50%;
				}
				.userInfo {
					display: inline-block;
				}
				.userName {
					font-size: 14px;
					font-weight: normal;
				}
				.roomId {
					font-size: 12px;
					font-weight: normal;
					color: #919091;
				}
			}
			.item-right {
				padding: 0;
				.set {
					float: right;
					height: 35px;
					padding: 0 10px;
					font-size: 14px;
					color: white;
					border: none;
				}
			}
		}
		.liveBefore-main {
			width: 100%;
			height: 70%;
			color: white;
			.live-title-wrap {
				position: relative;
				min-width: 24px;
				max-width: 280px;
				text-align: center;
				margin-bottom: 35px;
				.live-title {
					width: 24px;
					margin: 0 auto;
					font-size: 24px;
					display: inline-block;
					margin-bottom: 10px;
					@include text-overflow(1);
				}
				.live-title-wrap-bg {
					position: absolute;
					bottom: 0px;
					left: -3%;
					width: 106%;
					height: 5px;
					border: 1.5px solid white;
					border-top: none;
				}
				.live-title-input {
					width: 100%;
					text-align: center;
					background-color: transparent;
					color: white;
					border: none;
					font-size: 24px;
				}
			}
			.live-cover-wrap {
				width: 90%;
				text-align: center;
				margin-bottom: 45px;
				.live-cover-title-main {
					.live-cover-title {}
				}
				.live-cover-main {}
				.live-cover {}
				.live-cover-tips {
					margin-top: 3px;
					font-size: 12px;
					color: #1fcb95;
				}
			}
		}
		.liveBefore-footer {
			.startLive {
				width: 90%;
				margin: 0 5%;
				font-size: 16px;
				color: white;
				background-color: #1cd39b;
				border: none;
				border-radius: 20px;
			}
		}
	}
</style>